<template>
  <div class="support-customer">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>客户支持</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="在线客服" name="onlineSupport">
            <div class="online-support-section">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-card class="conversation-list-card">
                    <template #header>
                      <div class="card-header">
                        <span>会话列表</span>
                        <el-input
                          v-model="conversationSearch"
                          placeholder="搜索会话"
                          size="small"
                          clearable
                        >
                          <template #prefix>
                            <el-icon><Search /></el-icon>
                          </template>
                        </el-input>
                      </div>
                    </template>
                    
                    <div class="conversation-list">
                      <div
                        v-for="conversation in conversations"
                        :key="conversation.id"
                        class="conversation-item"
                        :class="{ active: activeConversationId === conversation.id }"
                        @click="selectConversation(conversation)"
                      >
                        <div class="conversation-avatar">
                          <el-avatar :size="32" :icon="conversation.avatar || 'User'" />
                        </div>
                        <div class="conversation-info">
                          <div class="conversation-title">
                            <span class="conversation-name">{{ conversation.name }}</span>
                            <span class="conversation-time">{{ conversation.lastTime }}</span>
                          </div>
                          <div class="conversation-preview">
                            <span class="conversation-last-message">{{ conversation.lastMessage }}</span>
                            <el-badge
                              v-if="conversation.unread > 0"
                              :value="conversation.unread"
                              class="conversation-unread"
                              type="danger"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                
                <el-col :span="18">
                  <el-card class="chat-card">
                    <template #header>
                      <div class="card-header">
                        <div class="chat-header-info">
                          <el-avatar :size="32" :icon="activeConversation?.avatar || 'User'" />
                          <div class="chat-header-text">
                            <span class="chat-name">{{ activeConversation?.name }}</span>
                            <span class="chat-status" :class="activeConversation?.status">
                              {{ activeConversation?.status === 'online' ? '在线' : '离线' }}
                            </span>
                          </div>
                        </div>
                        <div class="chat-header-actions">
                          <el-button size="small" @click="transferConversation">转接</el-button>
                          <el-button size="small" @click="closeConversation">结束会话</el-button>
                        </div>
                      </div>
                    </template>
                    
                    <div class="chat-messages" ref="chatMessagesRef">
                      <div
                        v-for="message in activeMessages"
                        :key="message.id"
                        class="message-item"
                        :class="{ 'message-mine': message.sender === 'me' }"
                      >
                        <div class="message-avatar">
                          <el-avatar :size="32" :icon="message.avatar || 'User'" />
                        </div>
                        <div class="message-content">
                          <div class="message-text">{{ message.content }}</div>
                          <div class="message-time">{{ message.time }}</div>
                        </div>
                      </div>
                    </div>
                    
                    <div class="chat-input">
                      <el-input
                        v-model="messageInput"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入消息内容"
                      />
                      <div class="chat-input-actions">
                        <el-button type="primary" @click="sendMessage">发送</el-button>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="客户反馈" name="customerFeedback">
            <div class="customer-feedback-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>客户反馈</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="feedbackDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadFeedbacks"
                      />
                      <el-select v-model="feedbackType" placeholder="反馈类型" @change="loadFeedbacks">
                        <el-option label="全部" value="" />
                        <el-option label="建议" value="suggestion" />
                        <el-option label="问题" value="issue" />
                        <el-option label="投诉" value="complaint" />
                      </el-select>
                      <el-select v-model="feedbackStatus" placeholder="处理状态" @change="loadFeedbacks">
                        <el-option label="全部" value="" />
                        <el-option label="待处理" value="pending" />
                        <el-option label="处理中" value="processing" />
                        <el-option label="已解决" value="resolved" />
                      </el-select>
                      <el-button @click="exportFeedbacks">导出</el-button>
                    </div>
                  </div>
                </template>
                
                <el-table :data="feedbacks" style="width: 100%">
                  <el-table-column prop="id" label="反馈ID" width="100" />
                  <el-table-column prop="customer" label="客户" width="150" />
                  <el-table-column prop="type" label="类型" width="100">
                    <template #default="scope">
                      <el-tag :type="getFeedbackType(scope.row.type)">
                        {{ scope.row.type }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" label="标题" />
                  <el-table-column prop="submitTime" label="提交时间" width="180" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getFeedbackStatusType(scope.row.status)">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button size="small" @click="viewFeedback(scope.row)">查看</el-button>
                      <el-button 
                        v-if="scope.row.status !== '已解决'"
                        size="small" 
                        type="primary" 
                        @click="handleFeedback(scope.row)"
                      >
                        处理
                      </el-button>
                      <el-button size="small" type="danger" @click="deleteFeedback(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                  <el-pagination
                    v-model:current-page="feedbackCurrentPage"
                    v-model:page-size="feedbackPageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="feedbackTotal"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleFeedbackSizeChange"
                    @current-change="handleFeedbackCurrentChange"
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="需求收集" name="requirementCollection">
            <div class="requirement-collection-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>需求收集</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="requirementDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadRequirements"
                      />
                      <el-select v-model="requirementType" placeholder="需求类型" @change="loadRequirements">
                        <el-option label="全部" value="" />
                        <el-option label="功能需求" value="feature" />
                        <el-option label="性能需求" value="performance" />
                        <el-option label="界面需求" value="ui" />
                      </el-select>
                      <el-select v-model="requirementPriority" placeholder="优先级" @change="loadRequirements">
                        <el-option label="全部" value="" />
                        <el-option label="高" value="high" />
                        <el-option label="中" value="medium" />
                        <el-option label="低" value="low" />
                      </el-select>
                      <el-button @click="exportRequirements">导出</el-button>
                    </div>
                  </div>
                </template>
                
                <el-table :data="requirements" style="width: 100%">
                  <el-table-column prop="id" label="需求ID" width="100" />
                  <el-table-column prop="customer" label="客户" width="150" />
                  <el-table-column prop="type" label="类型" width="120">
                    <template #default="scope">
                      <el-tag :type="getRequirementType(scope.row.type)">
                        {{ scope.row.type }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" label="需求标题" />
                  <el-table-column prop="priority" label="优先级" width="100">
                    <template #default="scope">
                      <el-tag :type="getPriorityType(scope.row.priority)">
                        {{ scope.row.priority }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="submitTime" label="提交时间" width="180" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getRequirementStatusType(scope.row.status)">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button size="small" @click="viewRequirement(scope.row)">查看</el-button>
                      <el-button 
                        v-if="scope.row.status === '待评估'"
                        size="small" 
                        type="primary" 
                        @click="evaluateRequirement(scope.row)"
                      >
                        评估
                      </el-button>
                      <el-button size="small" type="danger" @click="deleteRequirement(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                  <el-pagination
                    v-model:current-page="requirementCurrentPage"
                    v-model:page-size="requirementPageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="requirementTotal"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleRequirementSizeChange"
                    @current-change="handleRequirementCurrentChange"
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="客户满意度" name="customerSatisfaction">
            <div class="customer-satisfaction-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>客户满意度分析</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="satisfactionDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadSatisfactionData"
                      />
                      <el-button @click="exportSatisfactionData">导出</el-button>
                    </div>
                  </div>
                </template>
                
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">{{ satisfactionStats.satisfactionRate }}%</div>
                        <div class="stat-label">总体满意度</div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">{{ satisfactionStats.feedbackCount }}</div>
                        <div class="stat-label">反馈总数</div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">{{ satisfactionStats.positiveRate }}%</div>
                        <div class="stat-label">正面反馈率</div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">{{ satisfactionStats.responseRate }}%</div>
                        <div class="stat-label">响应及时率</div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
                
                <el-row :gutter="20" style="margin-top: 20px;">
                  <el-col :span="12">
                    <el-card>
                      <template #header>
                        <div class="card-header">
                          <span>满意度趋势</span>
                        </div>
                      </template>
                      <div ref="satisfactionChartRef" style="width: 100%; height: 300px;"></div>
                    </el-card>
                  </el-col>
                  
                  <el-col :span="12">
                    <el-card>
                      <template #header>
                        <div class="card-header">
                          <span>反馈分类统计</span>
                        </div>
                      </template>
                      <div ref="feedbackChartRef" style="width: 100%; height: 300px;"></div>
                    </el-card>
                  </el-col>
                </el-row>
                
                <el-card style="margin-top: 20px;">
                  <template #header>
                    <div class="card-header">
                      <span>客户满意度详情</span>
                    </div>
                  </template>
                  
                  <el-table :data="satisfactionDetails" style="width: 100%">
                    <el-table-column prop="customer" label="客户" width="150" />
                    <el-table-column prop="serviceType" label="服务类型" width="120" />
                    <el-table-column prop="satisfaction" label="满意度" width="100">
                      <template #default="scope">
                        <el-rate
                          v-model="scope.row.satisfaction"
                          disabled
                          :max="5"
                          :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column prop="comment" label="评价内容" />
                    <el-table-column prop="time" label="评价时间" width="180" />
                    <el-table-column label="操作" width="100">
                      <template #default="scope">
                        <el-button size="small" @click="viewSatisfactionDetail(scope.row)">详情</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  
                  <div class="pagination-container">
                    <el-pagination
                      v-model:current-page="satisfactionCurrentPage"
                      v-model:page-size="satisfactionPageSize"
                      :page-sizes="[10, 20, 50, 100]"
                      :total="satisfactionTotal"
                      layout="total, sizes, prev, pager, next, jumper"
                      @size-change="handleSatisfactionSizeChange"
                      @current-change="handleSatisfactionCurrentChange"
                    />
                  </div>
                </el-card>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 响应式数据
const activeTab = ref('onlineSupport')
const conversationSearch = ref('')
const messageInput = ref('')
const feedbackDateRange = ref([])
const feedbackType = ref('')
const feedbackStatus = ref('')
const requirementDateRange = ref([])
const requirementType = ref('')
const requirementPriority = ref('')
const satisfactionDateRange = ref([])

// 图表引用
const chatMessagesRef = ref<HTMLElement | null>(null)
const satisfactionChartRef = ref<HTMLElement | null>(null)
const feedbackChartRef = ref<HTMLElement | null>(null)

// 分页数据
const feedbackCurrentPage = ref(1)
const feedbackPageSize = ref(20)
const feedbackTotal = ref(120)
const requirementCurrentPage = ref(1)
const requirementPageSize = ref(20)
const requirementTotal = ref(85)
const satisfactionCurrentPage = ref(1)
const satisfactionPageSize = ref(20)
const satisfactionTotal = ref(200)

// 当前会话
const activeConversationId = ref(1)

// 会话列表
const conversations = ref([
  {
    id: 1,
    name: '张三',
    avatar: 'User',
    lastMessage: '请问如何导出报表？',
    lastTime: '14:30',
    unread: 2,
    status: 'online'
  },
  {
    id: 2,
    name: '李四',
    avatar: 'User',
    lastMessage: '订单状态查询',
    lastTime: '14:25',
    unread: 0,
    status: 'offline'
  }
])

// 消息列表
const messages = ref({
  1: [
    {
      id: 1,
      sender: 'customer',
      avatar: 'User',
      content: '请问如何导出报表？',
      time: '14:25'
    },
    {
      id: 2,
      sender: 'me',
      avatar: 'User',
      content: '您好，您可以在报表页面点击导出按钮，选择导出格式。',
      time: '14:26'
    },
    {
      id: 3,
      sender: 'customer',
      avatar: 'User',
      content: '导出的文件格式有哪些？',
      time: '14:30'
    }
  ],
  2: [
    {
      id: 1,
      sender: 'customer',
      avatar: 'User',
      content: '我的订单状态查询不到',
      time: '14:20'
    }
  ]
})

// 客户反馈数据
const feedbacks = ref([
  {
    id: 1,
    customer: '王五',
    type: '建议',
    title: '增加数据导入模板',
    submitTime: '2023-06-15 14:30:22',
    status: '待处理'
  },
  {
    id: 2,
    customer: '赵六',
    type: '问题',
    title: '订单查询功能异常',
    submitTime: '2023-06-15 14:25:11',
    status: '处理中'
  }
])

// 需求收集数据
const requirements = ref([
  {
    id: 1,
    customer: '孙七',
    type: '功能需求',
    title: '增加批量删除功能',
    priority: '高',
    submitTime: '2023-06-15 14:30:22',
    status: '待评估'
  },
  {
    id: 2,
    customer: '周八',
    type: '界面需求',
    title: '优化报表展示样式',
    priority: '中',
    submitTime: '2023-06-15 14:25:11',
    status: '已评估'
  }
])

// 满意度统计数据
const satisfactionStats = ref({
  satisfactionRate: 92.5,
  feedbackCount: 1247,
  positiveRate: 88.3,
  responseRate: 95.7
})

// 满意度详情数据
const satisfactionDetails = ref([
  {
    id: 1,
    customer: '张三',
    serviceType: '技术支持',
    satisfaction: 5,
    comment: '客服响应迅速，问题解决得很及时',
    time: '2023-06-15 14:30:22'
  },
  {
    id: 2,
    customer: '李四',
    serviceType: '功能咨询',
    satisfaction: 4,
    comment: '解答详细，很有帮助',
    time: '2023-06-15 14:25:11'
  }
])

// 计算属性
const activeConversation = computed(() => {
  return conversations.value.find(conv => conv.id === activeConversationId.value)
})

const activeMessages = computed(() => {
  return messages.value[activeConversationId.value] || []
})

// 方法
const selectConversation = (conversation: any) => {
  activeConversationId.value = conversation.id
  // 清除未读标记
  conversation.unread = 0
}

const sendMessage = () => {
  if (!messageInput.value.trim()) {
    ElMessage.warning('请输入消息内容')
    return
  }
  
  // 添加消息到当前会话
  const newMessage = {
    id: Date.now(),
    sender: 'me',
    avatar: 'User',
    content: messageInput.value,
    time: new Date().toTimeString().substring(0, 5)
  }
  
  if (!messages.value[activeConversationId.value]) {
    messages.value[activeConversationId.value] = []
  }
  
  messages.value[activeConversationId.value].push(newMessage)
  messageInput.value = ''
  
  // 滚动到最新消息
  setTimeout(() => {
    if (chatMessagesRef.value) {
      chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight
    }
  }, 100)
}

const transferConversation = () => {
  ElMessage.info('转接会话')
}

const closeConversation = () => {
  ElMessageBox.confirm(
    '确定要结束当前会话吗？',
    '结束会话确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('会话已结束')
  })
}

const loadFeedbacks = () => {
  ElMessage.info('加载客户反馈')
}

const exportFeedbacks = () => {
  ElMessage.success('客户反馈导出成功')
}

const viewFeedback = (row: any) => {
  ElMessage.info(`查看反馈: ${row.title}`)
}

const handleFeedback = (row: any) => {
  ElMessage.info(`处理反馈: ${row.title}`)
  row.status = '处理中'
}

const deleteFeedback = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除反馈 "${row.title}" 吗？`,
    '删除反馈确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('反馈删除成功')
    // 从列表中移除
    const index = feedbacks.value.indexOf(row)
    if (index > -1) {
      feedbacks.value.splice(index, 1)
    }
  })
}

const handleFeedbackSizeChange = (val: number) => {
  feedbackPageSize.value = val
  loadFeedbacks()
}

const handleFeedbackCurrentChange = (val: number) => {
  feedbackCurrentPage.value = val
  loadFeedbacks()
}

const loadRequirements = () => {
  ElMessage.info('加载需求收集')
}

const exportRequirements = () => {
  ElMessage.success('需求收集导出成功')
}

const viewRequirement = (row: any) => {
  ElMessage.info(`查看需求: ${row.title}`)
}

const evaluateRequirement = (row: any) => {
  ElMessage.info(`评估需求: ${row.title}`)
  row.status = '已评估'
}

const deleteRequirement = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除需求 "${row.title}" 吗？`,
    '删除需求确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('需求删除成功')
    // 从列表中移除
    const index = requirements.value.indexOf(row)
    if (index > -1) {
      requirements.value.splice(index, 1)
    }
  })
}

const handleRequirementSizeChange = (val: number) => {
  requirementPageSize.value = val
  loadRequirements()
}

const handleRequirementCurrentChange = (val: number) => {
  requirementCurrentPage.value = val
  loadRequirements()
}

const loadSatisfactionData = () => {
  ElMessage.info('加载满意度数据')
  initSatisfactionCharts()
}

const exportSatisfactionData = () => {
  ElMessage.success('满意度数据导出成功')
}

const viewSatisfactionDetail = (row: any) => {
  ElMessage.info(`查看满意度详情: ${row.customer}`)
}

const handleSatisfactionSizeChange = (val: number) => {
  satisfactionPageSize.value = val
  loadSatisfactionData()
}

const handleSatisfactionCurrentChange = (val: number) => {
  satisfactionCurrentPage.value = val
  loadSatisfactionData()
}

// 图表初始化方法
const initSatisfactionCharts = () => {
  // 满意度趋势图表
  if (satisfactionChartRef.value) {
    const satisfactionChart = echarts.init(satisfactionChartRef.value)
    satisfactionChart.setOption({
      title: { text: '满意度趋势' },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
      yAxis: { type: 'value' },
      series: [{ data: [85, 88, 90, 92, 91, 92.5], type: 'line', smooth: true }]
    })
  }
  
  // 反馈分类统计图表
  if (feedbackChartRef.value) {
    const feedbackChart = echarts.init(feedbackChartRef.value)
    feedbackChart.setOption({
      title: { text: '反馈分类统计' },
      tooltip: { trigger: 'item' },
      series: [{
        type: 'pie',
        data: [
          { value: 45, name: '建议' },
          { value: 30, name: '问题' },
          { value: 15, name: '投诉' },
          { value: 10, name: '其他' }
        ]
      }]
    })
  }
}

// 工具方法
const getFeedbackType = (type: string) => {
  switch (type) {
    case '建议': return 'success'
    case '问题': return 'warning'
    case '投诉': return 'danger'
    default: return 'info'
  }
}

const getFeedbackStatusType = (status: string) => {
  switch (status) {
    case '待处理': return 'info'
    case '处理中': return 'warning'
    case '已解决': return 'success'
    default: return 'info'
  }
}

const getRequirementType = (type: string) => {
  switch (type) {
    case '功能需求': return 'success'
    case '性能需求': return 'warning'
    case '界面需求': return 'primary'
    default: return 'info'
  }
}

const getPriorityType = (priority: string) => {
  switch (priority) {
    case '高': return 'danger'
    case '中': return 'warning'
    case '低': return 'success'
    default: return 'info'
  }
}

const getRequirementStatusType = (status: string) => {
  switch (status) {
    case '待评估': return 'info'
    case '已评估': return 'warning'
    case '已采纳': return 'success'
    case '已拒绝': return 'danger'
    default: return 'info'
  }
}

// 组件挂载时初始化图表
onMounted(() => {
  loadSatisfactionData()
})
</script>

<style scoped>
.support-customer {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.conversation-list-card {
  height: calc(100vh - 200px);
}

.conversation-list {
  height: calc(100% - 60px);
  overflow-y: auto;
}

.conversation-item {
  display: flex;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.conversation-item:hover,
.conversation-item.active {
  background-color: #f5f7fa;
}

.conversation-avatar {
  margin-right: 10px;
}

.conversation-info {
  flex: 1;
  min-width: 0;
}

.conversation-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.conversation-name {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-time {
  font-size: 12px;
  color: #999;
}

.conversation-preview {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.conversation-last-message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-card {
  height: calc(100vh - 200px);
}

.chat-header-info {
  display: flex;
  align-items: center;
}

.chat-header-text {
  margin-left: 10px;
}

.chat-name {
  font-weight: bold;
  margin-right: 10px;
}

.chat-status {
  font-size: 12px;
}

.chat-status.online {
  color: #67c23a;
}

.chat-status.offline {
  color: #909399;
}

.chat-messages {
  height: calc(100% - 180px);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
}

.message-item {
  display: flex;
  margin-bottom: 15px;
}

.message-item.message-mine {
  flex-direction: row-reverse;
}

.message-avatar {
  margin: 0 10px;
}

.message-content {
  max-width: 70%;
}

.message-text {
  padding: 10px;
  border-radius: 4px;
  background-color: #f0f2f5;
}

.message-item.message-mine .message-text {
  background-color: #409eff;
  color: #fff;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
  text-align: right;
}

.chat-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-input-actions {
  display: flex;
  justify-content: flex-end;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>